<template>
  <div class="edit-note">
    <AddEditNote
      bg-color="link"
      v-model="noteContent"
      placeholder="Edit note content here..."
      label="Edit note"
      ref="addEditNoteRef"
    >
      <template #buttons>
        <button @click="$router.back()" class="button is-link is-light">
          Cancel
        </button>
        <button
          @click="handleSaveClick"
          class="button is-link has-background-link"
          :disabled="!noteContent"
        >
          Save Note
        </button>
      </template>
    </AddEditNote>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import AddEditNote from '../components/Notes/AddEditNote.vue';
import { useNotesStore } from '@/stores/storeNotes';
import { useRoute, useRouter } from 'vue-router';

const noteContent = ref<string>('');

const notesStore = useNotesStore();

const route = useRoute();
const router = useRouter();

noteContent.value = notesStore.getNoteContent(route.params?.id);

const handleSaveClick = () => {
  notesStore.updateNote(route.params?.id, noteContent.value);
  router.push('/');
};
</script>
